<script setup>
import Footer from "@/components/footer.vue";
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';
import qs from 'qs';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 使用ref创建响应式数据
const orderId = ref(route.query.orderId);
const orders = ref({});
const isShowDetailet = ref(false);

// 在组件挂载时执行
onMounted(() => {

  // 获取订单详情
  axios.post('http://localhost/order/OrdersController/getOrdersById', qs.stringify({
    orderId: orderId.value
  })).then(response => {
    orders.value = response.data;
  }).catch(error => {
    console.error(error);
  });

  // 一旦路由到在线支付组件，就不能回到订单确认组件
  // window.onpopstate = () => {
  //   router.push({ path: '/index' });
  // };
});

// 在组件卸载前执行
// onBeforeUnmount(() => {
//   window.onpopstate = null;
// });

// 切换详情显示的方法
const detailetShow = () => {
  isShowDetailet.value = !isShowDetailet.value;
};
</script>

<template>
  <div class="wrapper">

    <!--header-->
    <header>
      <p>在线支付</p>
    </header>
    <!--订单信息部分-->
    <h3>订单信息：</h3>
    <div class="order_info">
      <p>
        {{ orders.business?.businessName }}
        <i class="iconfont icon-daosanjiao" @click="detailetShow"></i>
      </p>
      <p>￥{{ orders.orderTotal || 0 }}</p>
    </div>
    <ul class="order_data" v-show="isShowDetailet">
      <li v-for="item in orders.list" :key="item.id">
        <p>{{item.food.foodName}} x {{item.quantity}}</p>
        <p>￥{{item.food.foodPrice*item.quantity}}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>￥{{ orders.business?.deliveryPrice || 0 }}</p>
      </li>
    </ul>
    <!--支付方式-->
    <ul class="payment_type">
      <li>
        <img src="../assets/img/alipay.png">
        <i class="iconfont icon-gou"></i>
      </li>
      <li>
        <img src="../assets/img/wechat.png">
        <!--                <i class="iconfont icon-gou"></i>-->
      </li>
    </ul>
    <div class="pay_button">
      <button>确认支付</button>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped lang="less">
@import url('../assets/font/font_daosanjiao/iconfont.css');
@import url('../assets/font/font_gou/iconfont.css');

/**********总容器**********/
.wrapper{
  width: 100%;
  height: 100%;
}
/**********header**********/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}
/*********订单信息**********/
.wrapper h3{
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0;
  /*上，左右，下*/
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}
.wrapper .order_info{
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order_info p:last-child{
  color: orangered;
}
.wrapper .order_data{
  width: 100%;
}
.wrapper .order_data li{
  box-sizing: border-box;
  padding: 1vw 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order_data li p{
  font-size: 3vw;
  color: #666666;
}
/*********支付方式**********/
.wrapper .payment_type{
  width: 100%;
}
.wrapper .payment_type li{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .payment_type li img{
  width: 33vw;
  height: 8.9vw;
}
.wrapper .payment_type li .icon-gou{
  font-size: 5vw;
  color: #38ca73;
}
.wrapper .pay_button{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
}
.wrapper .pay_button button{
  width: 100%;
  height: 10vw;
  border: none;
  outline:none;
  /*外轮廓线去掉*/
  border-radius: 4px;
  background-color: #38ca73;
  color: #fff;
}
</style>